{% extends 'base.html' %}
{% load i18n %}
{% load static %}

{% block title %}{% translate '镜像发布' %}{% endblock %}

{% block head %}{% endblock %}

{% block boby %}
    <div class="container-fluid col-12">
        <div class="card">
            <div class="card-header">
                <span class="card-title">{% translate '镜像发布' %}</span>
                <span><a class="btn btn-sm btn-primary float-right" href="{% url 'vms:vms-list' %}">
                    {% translate '虚拟机列表' %}
                </a></span>
            </div>
            <div class="card-body align-content-center">

                <form class="form-horizontal">
                    {% csrf_token %}
                    <div class="form-group row">
                        <label for="id-image-name"
                               class="offset-sm-1 col-sm-2 text-right col-form-label">{% translate '镜像名称' %}</label>
                        <div class="col-sm-7 input-group mb-3">
                            <span class="input-group-text" id="basic-addon1">-user_</span>
                            <input type="text" class="form-control" placeholder="{% translate '镜像名称' %}"
                                   aria-describedby="basic-addon1" id="id-image-name" name="image-name">
                        </div>

                    </div>
                    <div class="form-group row">
                        <label for="id-image-label"
                               class="offset-sm-1 col-sm-2 text-right col-form-label">{% translate '镜像标签' %}</label>
                        <div class="col-sm-7 input-group mb-3">
                            <select name="image-label" class="form-control" id="id-image-label">

                                {% for key, value in image.CHOICES_TAG %}
                                    {% if image.tag == key %}
                                        <option value="{{ key }}" selected>{{ value }}</option>
                                    {% else %}
                                        <option value="{{ key }}">{{ value }}</option>
                                    {% endif %}

                                {% endfor %}

                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-image-os-type"
                               class="offset-sm-1 col-sm-2 text-right col-form-label">{% translate '系统类型' %}</label>
                        <div class="col-sm-7 input-group mb-3">

                            <select name="image-os-type" class="form-control" id="id-image-os-type">
                                {% for key, value in image.CHOICES_SYS_TYPE %}
                                    {% if image.sys_type == key %}
                                        <option value="{{ key }}" selected>{{ value }}</option>
                                    {% else %}
                                        <option value="{{ key }}">{{ value }}</option>
                                    {% endif %}
                                {% endfor %}

                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-image-os-release"
                               class="offset-sm-1 col-sm-2 text-right col-form-label">{% translate '系统发行版本' %}</label>
                        <div class="col-sm-7 input-group mb-3">

                            <select name="image-os-release" class="form-control" id="id-image-os-release">
                                {% for key, value in image.RELEASE_CHOICES %}
                                    {% if image.release == key %}
                                        <option value="{{ key }}" selected>{{ value }}</option>
                                    {% else %}
                                        <option value="{{ key }}">{{ value }}</option>
                                    {% endif %}
                                {% endfor %}

                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-image-os-version"
                               class="offset-sm-1 col-sm-2 text-right col-form-label">{% translate '系统发行编号' %}</label>
                        <div class="col-sm-7 input-group mb-3">

                            <input type="text" class="form-control" placeholder="{% translate '系统发行编号' %}"
                                   id="id-image-os-version" value="{{ image.version }}" name="image-os-version">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-image-os-architecture"
                               class="offset-sm-1 col-sm-2 text-right col-form-label">{% translate '系统架构' %}</label>
                        <div class="col-sm-7 input-group mb-3">

                            <select name="image-os-architecture" class="form-control" id="id-image-os-architecture">
                                {% for key, value in image.ARCHITECTURE_CHOICES %}
                                    {% if image.architecture == key %}
                                        <option value="{{ key }}" selected>{{ value }}</option>
                                    {% else %}
                                        <option value="{{ key }}">{{ value }}</option>
                                    {% endif %}
                                {% endfor %}

                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-image-os-boot_mode"
                               class="offset-sm-1 col-sm-2 text-right col-form-label">{% translate '系统启动方式' %}</label>
                        <div class="col-sm-7 input-group mb-3">

                            <select name="image-os-boot_mode" class="form-control" id="id-image-os-boot_mode">
                                {% for key, value in image.BOOT_CHOICES %}
                                    {% if image.boot_mode == key %}
                                        <option value="{{ key }}" selected>{{ value }}</option>
                                    {% else %}
                                        <option value="{{ key }}">{{ value }}</option>
                                    {% endif %}

                                {% endfor %}

                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-image-size"
                               class="offset-sm-1 col-sm-2 text-right col-form-label">{% translate '镜像大小' %}</label>
                        <div class="col-sm-7 input-group mb-3">

                            <input type="text" class="form-control" placeholder="{% translate '镜像大小' %}"
                                   id="id-image-size" value="{{ image.size }}" name="image-size">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-image-default_user"
                               class="offset-sm-1 col-sm-2 text-right col-form-label">{% translate '系统默认登录用户名' %}</label>
                        <div class="col-sm-7 input-group mb-3">

                            <input type="text" class="form-control"
                                   placeholder="{% translate '系统默认登录用户名' %}"
                                   id="id-image-default_user" value="{{ image.default_user }}"
                                   name="image-default_user">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-image-default_password"
                               class="offset-sm-1 col-sm-2 text-right col-form-label">{% translate '系统默认登录密码' %}</label>
                        <div class="col-sm-7 input-group mb-3">

                            <input type="text" class="form-control"
                                   placeholder="{% translate '系统默认登录密码' %}"
                                   id="id-image-default_password" value="{{ image.default_password }}"
                                   name="image-default_password">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="id-image-desc"
                               class="offset-sm-1 col-sm-2 text-right col-form-label">{% translate '描述' %}</label>
                        <div class="col-sm-7 input-group mb-3">

                            <input type="text" class="form-control" placeholder="{% translate '描述' %}"
                                   id="id-image-desc" name="image-desc">
                        </div>
                    </div>
                    <div class="form-group row ">
                        <label for="id-image-enable"
                               class="offset-sm-1 col-sm-2 text-right col-form-label">{% translate '启用' %}</label>
                        <div class="col-sm-7 input-group mb-3">
                            {% if image.enable == True %}
                                <input type="checkbox" class="form-check-input" id="id-image-enable" name="image-enable"
                                       checked>
                            {% else %}
                                <input type="checkbox" class="form-check-input" id="id-image-enable"
                                       name="image-enable">
                            {% endif %}

                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="offset-sm-1 col-sm-2">
                            <button type="submit"
                                    class="btn btn-primary float-right"
                                    id="submit-id">{% translate '发布镜像' %}</button>

                        </div>
                        <div class="col-sm-7 input-group mb-3">
                            <span id="timerSpanText" style="display:inline;"></span>
                            <span id="timerSpan" style="display:none;">0</span>
                        </div>
                    </div>

                </form>
            </div>
            <div class="panel-footer">

            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% static 'evcloud/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'art-template/template-web.js' %}"></script>
{#    <script type="text/javascript" src="{% static 'vms/vms_create.js' %}"></script>#}
    <script type="text/javascript">
        let bt = document.getElementById('submit-id')
        let tst = document.getElementById('timerSpanText')
        {#const pN = butsub.parentNode.parentNode.parentNode; // form#}
        bt.addEventListener('click', function (event) {
            event.preventDefault();

            bt.disabled = true;
            tst.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 提交中, 请耐心等待时间较长, 大约10 分钟左右...'
            var timerSpan = document.getElementById("timerSpan");
            timerSpan.style.display = "inline";
            startTime = Date.now();
            timerInterval = setInterval(updateTimer, 12030);


            let image_name = document.getElementById('id-image-name').value

            let image_label = $('#id-image-label').val() // 镜像标签
            let image_os_type = $('#id-image-os-type').val() // 系统类型
            let image_os_release = $('#id-image-os-release').val() // 系统发行版本
            let image_os_version = document.getElementById('id-image-os-version').value // 系统发行编号
            let image_os_architecture = $('#id-image-os-architecture').val() //系统架构
            let image_os_boot_mode = $('#id-image-os-boot_mode').val() //系统启动方式
            let image_size = document.getElementById('id-image-size').value //镜像大小
            let image_default_user = document.getElementById('id-image-default_user').value //系统默认登录用户名
            let image_default_password = document.getElementById('id-image-default_password').value //系统默认登录密码
            let image_desc = document.getElementById('id-image-desc').value //描述
            let image_enable = document.getElementById('id-image-enable').checked //启用

            $.ajax({
                type: 'POST',
                url: '/vms/image-release/{{ vm_uuid }}/',
                headers: {
                    'X-CSRFToken': '{{csrf_token}}'
                },
                data: {
                    'image_name': image_name,
                    'image_label': image_label,
                    'image_os_type': image_os_type,
                    'image_os_release': image_os_release,
                    'image_os_version': image_os_version,
                    'image_os_architecture': image_os_architecture,
                    'image_os_boot_mode': image_os_boot_mode,
                    'image_size': image_size,
                    'image_default_user': image_default_user,
                    'image_default_password': image_default_password,
                    'image_desc': image_desc,
                    'image_enable': image_enable,

                },
                timeout: 1203000,
                async: true,
                success: function (data) {

                    tst.innerHTML = '<span id="timerSpanText" style="display:inline;">发布镜像成功 </span>'
                    // 在需要停止定时器的地方调用 clearInterval
                    clearInterval(timerInterval);
                    alert(data.msg)

                },
                error: function (data) {

                    tst.innerHTML = '<span id="timerSpanText" style="display:inline;">发布镜像失败 </span>'
                    // 在需要停止定时器的地方调用 clearInterval
                    clearInterval(timerInterval);
                    alert(data.responseJSON.msg)
                    bt.disabled = false;
                }
            })

        })

        function updateTimer() {
            let elapsedTime = Math.floor((Date.now() - startTime) / 1000);
            document.getElementById("timerSpan").textContent = elapsedTime + 's';
        }

    </script>
{% endblock %}




